import './App.css';
// react-router-dom  react的路由插件
import React, { Component } from 'react';
import {
  handleadd,
  handleasync,
  handledecrement
} from '../../redux/actions';
class App extends Component {
  constructor(props) {
    super(props);
  }

  handleAdd = () => {
    const num = this.select.value * 1;
    console.log(this.props.store);
    // 组件中触发actions
    this.props.store.dispatch(handleadd(num));

  }
  handleDecrement = () => {
    const num = this.select.value * 1;
    this.props.store.dispatch(handledecrement(num));

  }
  handleOdd = () => {
    const num = this.select.value * 1;
    if (this.props.store.getState() % 2 == 1) {
      this.props.store.dispatch(handleadd(num));
    }
  }
  handleAsync = () => {
    const num = this.select.value * 1;
    this.props.store.dispatch(handleasync(num))
  }

  render() {
    return (
      <div>
        <h1>app</h1>
        <h2>{this.props.store.getState()}</h2>
        <select ref={select => this.select = select}>
          <option value='1'>1</option>
          <option value='2'>2</option>
          <option value='3'>3</option>
        </select>
        <button onClick={this.handleAdd}>add +</button>
        <button onClick={this.handleDecrement}>decrement -</button>
        <button onClick={this.handleOdd}>odd Add</button>
        <button onClick={this.handleAsync}>async decrement</button>
      </div>
    );
  }
}

export default App;






